import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  ScrollView,
  Image
} from 'react-native';
import Platform from 'Platform';
import TImage from '../../components/TImage';
import BasePage from '../common/BasePage';
import TRefreshComponent from '../../components/TRefreshComponent';
import CommonStyles from '../../common/CommonStyles';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import ToastUtils from '../../common/ToastUtils';
import HeartBaseContentPage from './HeartBaseContentPage';
import HeartLoveItemView from './HeartLoveItemView';
import HeartLoveRequestUsersAction from '../../actions/heart/HeartLoveRequestUsersAction';

var love_config=[{icon:require("../../../resource/images/heart/aiqingshi/1.png"), width:48, height:48,title:"我想找到你", page:Config.pages.heart_love_find_you},
                {icon:require("../../../resource/images/heart/aiqingshi/2.png"), width:39, height:47,title:"他和她", page:Config.pages.heart_love_he_and_she},
                {icon:require("../../../resource/images/heart/aiqingshi/3.png"), width:46, height:38,title:"爱的困惑", page:Config.pages.heart_love_question}]


export default class HeartLovePage extends HeartBaseContentPage {
  constructor(props) {
    super(props);

    this.state.isRefreshing = false;
    this._pullRefresh = null;
  }

  componentWillUpdate(nextProps, nextState, nextContext) {
    if(nextState.isResponeUpdate) {
      nextState.isResponeUpdate = false;
      this.setState({
        isRefreshing: false,
      })
      this._pullRefresh.finish(1, nextState.data);
    }
    if(this._authorization != this.props.pageData.routeData.authorization) {
      this._authorization = this.props.pageData.routeData.authorization;
      this._pullRefresh.doRefresh();
    }
  }

  render(){
  	 return (
      <View style={{height:SizeUtils.getWindowSize().height}}>
        <TRefreshComponent style={{height:SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(30)}}
          ref={(ref)=>this._pullRefresh = ref}
          onRefresh = {this._onRefresh.bind(this)}
          onPressItem = {this._onPressItem.bind(this)}
          onRenderItem = {this._onRenderItem.bind(this)}
          onRenderHeader = {this._onRenderHeader.bind(this)}
          keyboardDismissMode = {true}
        />
      </View>
    )
  }

  _onRefresh(page) {
    if(this.state.isRefreshing == false) {
      this.setState({
        isRefreshing:true,
      })
      this._requestData(page);
    }
  }

  _onRenderHeader() {
    return (
      <View style={{flexDirection: "column"}}>
        {this._renderImage()}
        {this._renderTopBar()}
        {this._renderTab()}
      </View>
    )
  }

  //override
  _renderTab(){
    return (<View style = {{flexDirection: 'row', justifyContent: 'space-around',
      width:SizeUtils.getWindowSize().width,
      borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
       paddingBottom:SizeUtils.translateDesignHeightToCode(26)}}>
                {this._getTabButton(love_config[0])}
                {this._getTabButton(love_config[1])}
                {this._getTabButton(love_config[2])}
        </View>);
  }

  _renderTopBar() {
    return(
      <View style={{position:"absolute", flexDirection:"row", justifyContent:"space-between",
          width:SizeUtils.getWindowSize().width,
          top:Config.tabBarTop,
          height:SizeUtils.translateDesignHeightToCode(80)}}>
        <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(100),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40)}} onPress={() => this.goBack()}>
          <TImage source={require("../../../resource/images/common/Back-icon2.png")} style={{width:24, height:41}} />
        </TouchableOpacity>
        <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(100),
            paddingRight:SizeUtils.translateDesignWidthToCode(40), flexDirection:"row", justifyContent:"flex-end"}}
            onPress={() => this.gotoPage(Config.pages.heart_love_search_condition)}>
          <TImage source={require("../../../resource/images/heart/aiqingshi/search_w.png")} style={{width:42, height:43}} />
        </TouchableOpacity>
      </View>
    )
  }

  _getBackImage() {
    return require("../../../resource/images/heart/aiqingshi1.png");
  }

  //override
  _getTabButton(item) {
    return(
      <TouchableOpacity
        onPress = {() => this._onPressPageBtn(item)}
        style={{flexDirection: 'column',alignItems: 'center'}}>
        <View style={{width:SizeUtils.translateDesignWidthToCode(50), height:SizeUtils.translateDesignWidthToCode(50),
            flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
          <TImage source={item.icon} style={{width:item.width,
            height:item.height}}/>
        </View>
        <Text style={{color: "#666666",marginTop:SizeUtils.translateFontSizeToCode(20),backgroundColor:"#00000000",
            textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(24)}}>{item.title}
        </Text>
      </TouchableOpacity>
    )
  }

  _onRenderItem(data, index) {
    return <HeartLoveItemView data = {data} key={index} />
  }

  _renderContent(){
    return <View style={{width:SizeUtils.getWindowSize().width,flexDirection: 'column',alignItems: 'center',
              marginTop:SizeUtils.translateDesignHeightToCode(8)}}>
           {this._renderContentItems()}
       </View>
  }

   _onPressPageBtn(item) {
    // this.gotoPage(Config.pages.news_content, data);
    // console.log("_onPressItem",item);
    // if(Platform.OS === "android") {
    if(item.title === "爱的困惑") {
       ToastUtils.show("功能暂未开放");
       return;
    }

    if(item.page) {
      this.gotoPage(item.page);
    }
  }

  _requestData(page) {
      //page第几页
      //page_size每页几项
      // tag标签，0所有活动，1未开始活动，2进行中活动，3已结束活动 4 热门
      new HeartLoveRequestUsersAction().call(this, {page:page, page_size:10, sort_id:1});
    //   this._initTimer = setTimeout(()=>{
    //    clearTimeout(this._initTimer)
    //    this._initComplete = true;
    //    this._pullRefresh.finish(1, test_love_data);
    //  }, 1000);
  }
}
